<style>
	/* 会员关系图样式 */
	.member-charts-container {
		background: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0,0,0,0.1);
		overflow: hidden;
	}

	.charts-header {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: white;
		padding: 20px;
		position: relative;
	}

	.charts-title {
		font-size: 18px;
		font-weight: bold;
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.close-btn {
		color: white;
		font-size: 20px;
		cursor: pointer;
		opacity: 0.8;
		transition: opacity 0.3s;
	}

	.close-btn:hover {
		opacity: 1;
	}

	.search-section {
		background: #f8f9fa;
		padding: 20px;
		border-bottom: 1px solid #e9ecef;
	}

	.search-form {
		display: flex;
		align-items: center;
		gap: 15px;
		flex-wrap: wrap;
	}

	.search-input-group {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.search-label {
		font-weight: 500;
		color: #495057;
		white-space: nowrap;
	}

	.search-input {
		border: 1px solid #ced4da;
		border-radius: 4px;
		padding: 8px 12px;
		font-size: 14px;
		width: 160px;
		transition: border-color 0.3s;
	}

	.search-input:focus {
		outline: none;
		border-color: #667eea;
		box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
	}

	.btn-group {
		display: flex;
		gap: 10px;
	}

	.btn {
		padding: 8px 16px;
		border: none;
		border-radius: 4px;
		font-size: 14px;
		cursor: pointer;
		transition: all 0.3s;
		text-decoration: none;
		display: inline-flex;
		align-items: center;
		gap: 5px;
	}

	.btn-primary {
		background: #667eea;
		color: white;
	}

	.btn-primary:hover {
		background: #5a6fd8;
		transform: translateY(-1px);
	}

	.btn-secondary {
		background: #6c757d;
		color: white;
	}

	.btn-secondary:hover {
		background: #5a6268;
		transform: translateY(-1px);
	}

	.btn-info {
		background: #17a2b8;
		color: white;
	}

	.btn-info:hover {
		background: #138496;
		transform: translateY(-1px);
	}

	.breadcrumb-section {
		background: #fff;
		padding: 15px 20px;
		border-bottom: 1px solid #e9ecef;
	}

	.breadcrumb {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: 14px;
	}

	.breadcrumb-item {
		color: #6c757d;
	}

	.breadcrumb-item.active {
		color: #495057;
		font-weight: 500;
	}

	.breadcrumb-link {
		color: #667eea;
		text-decoration: none;
		cursor: pointer;
	}

	.breadcrumb-link:hover {
		text-decoration: underline;
	}

	.breadcrumb-separator {
		color: #adb5bd;
	}

	.charts-content {
		padding: 20px;
		min-height: 500px;
	}

	.charts-container {
		border: 2px solid #667eea;
		border-radius: 8px;
		background: #f8f9fa;
		position: relative;
		overflow: hidden;
	}

	.empty-state {
		text-align: center;
		padding: 60px 20px;
		color: #6c757d;
	}

	.empty-state-icon {
		font-size: 48px;
		margin-bottom: 16px;
		opacity: 0.5;
	}

	.empty-state-text {
		font-size: 16px;
		margin-bottom: 8px;
	}

	.empty-state-subtext {
		font-size: 14px;
		opacity: 0.7;
	}

	/* 响应式设计 */
	@media (max-width: 768px) {
		.search-form {
			flex-direction: column;
			align-items: stretch;
		}

		.search-input-group {
			flex-direction: column;
			align-items: stretch;
		}

		.search-input {
			width: 100%;
		}

		.btn-group {
			justify-content: center;
		}

		.breadcrumb {
			flex-wrap: wrap;
		}
	}
</style>

<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-md12">
            <div class="member-charts-container">
                <!-- 头部 -->
                <div class="charts-header">
                    <div class="charts-title">
                        <span>链动会员关系图</span>
                        {if input('param.isopen')==1}
                        <i class="layui-icon layui-icon-close close-btn" onclick="closeself()"></i>
                        {/if}
                    </div>
                </div>

                <!-- 搜索区域 -->
                <div class="search-section">
                    <div class="search-form">
                        <div class="search-input-group">
                            <label class="search-label">会员ID：</label>
                            <input type="text" id="member_id_input" value="{$Request.param.mid}"
                                   class="search-input" placeholder="输入会员ID查看关系图">
                        </div>
                        <div class="btn-group">
                            <button class="btn btn-primary" onclick="searchMember()">
                                <i class="layui-icon layui-icon-search"></i>查看
                            </button>
                            {if $has_parent}
                            <button class="btn btn-secondary" onclick="goToParent({$parent_info.member_id})">
                                <i class="layui-icon layui-icon-up"></i>上一层
                            </button>
                            {/if}
                            <button class="btn btn-info" onclick="refreshChart()">
                                <i class="layui-icon layui-icon-refresh"></i>刷新
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 面包屑导航 -->
                {if $member}
                <div class="breadcrumb-section">
                    <nav class="breadcrumb">
                        <span class="breadcrumb-item">
                            <span class="breadcrumb-link" onclick="goToRoot()">根节点</span>
                        </span>
                        <span class="breadcrumb-separator">></span>
                        <span class="breadcrumb-item active">
                            {$member.nickname}(ID:{$member.member_id})
                        </span>
                    </nav>
                </div>
                {/if}

                <!-- 关系图内容 -->
                <div class="charts-content">
                    {if $error_message}
                    <div class="empty-state">
                        <div class="empty-state-icon">
                            <i class="layui-icon layui-icon-face-cry" style="color: #ff6b6b;"></i>
                        </div>
                        <div class="empty-state-text" style="color: #ff6b6b;">查询失败</div>
                        <div class="empty-state-subtext">{$error_message}</div>
                        <div style="margin-top: 20px;">
                            <button class="layui-btn layui-btn-primary" onclick="goToRoot()">查看根节点</button>
                            <button class="layui-btn layui-btn-normal" onclick="refreshChart()">重新尝试</button>
                        </div>
                    </div>
                    {elseif $member}
                    <div class="charts-container" id="guanxitu"
                         style="height:{if $deeplevel > 4}{$deeplevel*150}px{else}600px{/if}">
                    </div>
                    {else}
                    <div class="empty-state">
                        <div class="empty-state-icon">
                            <i class="layui-icon layui-icon-group"></i>
                        </div>
                        <div class="empty-state-text">暂无会员关系图数据</div>
                        <div class="empty-state-subtext">请输入会员ID查看对应的关系图</div>
                        <div style="margin-top: 20px;">
                            <button class="layui-btn layui-btn-primary" onclick="goToRoot()">查看根节点</button>
                        </div>
                    </div>
                    {/if}
                </div>
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" href="LIAN_CSS/member_charts.css?v=1110">
    <script src="LIAN_JS/echarts.min.js"></script>
    <script src="LIAN_JS/member_charts.js?v=1110"></script>
	<script>
	// 关闭弹窗
	function closeself() {
		var index = parent.layer.getFrameIndex(window.name);
		parent.layer.close(index);
	}

	// 查看会员
	function searchMember() {
		var mid = document.getElementById('member_id_input').value;

		if (!mid || mid.trim() === '') {
			layer.msg('请输入会员ID');
			return;
		}

		// 验证输入是否为数字
		if (!/^\d+$/.test(mid.trim())) {
			layer.msg('会员ID必须为数字');
			return;
		}

		var params = {mid: mid.trim()};
		var isOpen = "{:input('param.isopen')}";
		if (isOpen == "1") {
			params.isopen = 1;
		}

		location.hash = ns.hash("lian://shop/member/charts", params);
	}

	// 跳转到上一层
	function goToParent(pid) {
		if (!pid) {
			layer.msg('上级信息不存在');
			return;
		}

		var params = {mid: pid};
		var isOpen = "{:input('param.isopen')}";
		if (isOpen == "1") {
			params.isopen = 1;
		}
		location.hash = ns.hash("lian://shop/member/charts", params);
	}

	// 跳转到根节点
	function goToRoot() {
		layer.confirm('确定要跳转到根节点吗？', function(index) {
			var params = {mid: 1}; // 假设根节点ID为1，可根据实际情况调整
			var isOpen = "{:input('param.isopen')}";
			if (isOpen == "1") {
				params.isopen = 1;
			}
			location.hash = ns.hash("lian://shop/member/charts", params);
			layer.close(index);
		});
	}

	// 刷新图表
	function refreshChart() {
		location.reload();
	}

	// 回车搜索
	document.getElementById('member_id_input').addEventListener('keypress', function(e) {
		if (e.key === 'Enter') {
			searchMember();
		}
	});

	{if $member}
	// 会员数据
	var memberData = {$member_json|raw};
	console.log('原始数据:', '{$member_json}');
	console.log('解析后数据:', memberData);

	// 如果是字符串，尝试解析
	if (typeof memberData === 'string') {
		try {
			memberData = JSON.parse(memberData);
		} catch (e) {
			console.error('JSON解析失败:', e);
			layer.msg('数据格式错误', {icon: 2});
			memberData = null;
		}
	}

	var dom = document.getElementById("guanxitu");
	
	if (dom && memberData && memberData.member_id) {
		console.log('开始渲染关系图...');
		
		// 初始化ECharts
		var myChart = echarts.init(dom);
		
		// ECharts配置
		var option = {
			backgroundColor: '#f8f9fa',
			tooltip: {
				trigger: 'item',
				confine: true,
				backgroundColor: 'rgba(50,50,50,0.9)',
				borderColor: '#667eea',
				borderWidth: 1,
				borderRadius: 6,
				textStyle: {
					color: '#fff',
					fontSize: 12
				},
				formatter: function(params) {
					var data = params.data;
					if (!data) return '';
					
					var html = '<div style="padding: 10px; min-width: 180px;">';
					html += '<div style="font-weight: bold; margin-bottom: 8px; color: #667eea; font-size: 14px;">' + (data.nickname || '未知会员') + '</div>';
					html += '<div style="margin-bottom: 4px;">会员ID: <span style="color: #ffd93d;">' + data.member_id + '</span></div>';
					
					if (data.pid && data.pid > 0) {
						html += '<div style="margin-bottom: 4px;">推荐人: <span style="color: #6bcf7f;">' + data.pid + '</span></div>';
					}
					
					if (data.up_pid && data.up_pid > 0) {
						html += '<div style="margin-bottom: 4px;">公排上级: <span style="color: #ff6b6b;">' + data.up_pid + '</span></div>';
					}
					
					if (data.level) {
						html += '<div style="margin-bottom: 4px;">层级: <span style="color: #4ecdc4;">' + data.level + '</span></div>';
					}
					
					if (data.children && data.children.length > 0) {
						html += '<div style="margin-top: 8px; padding-top: 6px; border-top: 1px solid #666;">下级成员: <span style="color: #ffd93d;">' + data.children.length + '</span> 人</div>';
					}
					
					html += '<div style="margin-top: 8px; font-size: 11px; color: #aaa;">点击节点查看详情</div>';
					html += '</div>';
					return html;
				}
			},
			series: [{
				type: 'tree',
				data: [memberData],
				left: '5%',
				right: '5%',
				top: '10%',
				bottom: '10%',
				
				// 节点样式
				symbol: function(value, params) {
					// 如果有头像且不是默认头像，使用头像
					if (params.data.headimg && params.data.headimg !== '/static/img/touxiang.png' && params.data.headimg !== '') {
						return 'image://' + params.data.headimg;
					}
					return 'circle';
				},
				
				symbolSize: function(value, params) {
					// 根据层级调整大小
					var level = params.data.level || 1;
					if (level === 1) return 60; // 根节点最大
					if (level === 2) return 50;
					return Math.max(40, 55 - level * 3);
				},
				
				orient: 'vertical',
				expandAndCollapse: true,
				roam: true,
				initialTreeDepth: -1,
				
				// 节点样式
				itemStyle: {
					borderColor: function(params) {
						var level = params.data.level || 1;
						if (level === 1) return '#667eea'; // 根节点蓝色
						if (params.data.children && params.data.children.length > 0) {
							return '#6bcf7f'; // 有下级绿色
						}
						return '#ffd93d'; // 叶子节点黄色
					},
					borderWidth: 2,
					shadowColor: 'rgba(0,0,0,0.3)',
					shadowBlur: 6,
					shadowOffsetY: 2
				},
				
				// 连接线样式
				lineStyle: {
					color: '#667eea',
					width: 2,
					curveness: 0.3,
					shadowColor: 'rgba(102, 126, 234, 0.2)',
					shadowBlur: 4
				},
				
				// 标签样式
				label: {
					show: true,
					position: 'bottom',
					verticalAlign: 'top',
					align: 'middle',
					fontSize: 11,
					color: '#333',
					fontWeight: 'bold',
					backgroundColor: 'rgba(255,255,255,0.95)',
					borderColor: function(params) {
						var level = params.data.level || 1;
						if (level === 1) return '#667eea';
						if (params.data.children && params.data.children.length > 0) {
							return '#6bcf7f';
						}
						return '#ffd93d';
					},
					borderWidth: 1,
					borderRadius: 4,
					padding: [4, 8],
					shadowColor: 'rgba(0,0,0,0.1)',
					shadowBlur: 2,
					formatter: function(params) {
						var data = params.data;
						var text = (data.nickname || '未知会员') + '\nID:' + data.member_id;
						if (data.pid && data.pid > 0) {
							text += '\n推荐人:' + data.pid;
						}
						return text;
					}
				},
				
				// 鼠标悬停效果
				emphasis: {
					focus: 'descendant',
					itemStyle: {
						borderColor: '#ff6b6b',
						borderWidth: 3,
						shadowBlur: 10
					},
					lineStyle: {
						color: '#ff6b6b',
						width: 3
					},
					label: {
						fontSize: 12
					}
				},
				
				// 动画效果
				animationDuration: 1000,
				animationDurationUpdate: 600
			}]
		};

		// 渲染图表
		try {
			myChart.setOption(option);
			console.log('关系图渲染成功');

			// 点击事件
			myChart.on('click', function(params) {
				if (params.data && params.data.member_id) {
					console.log('点击节点:', params.data.nickname, 'ID:', params.data.member_id);
					
					var clickParams = {mid: params.data.member_id};
					var isOpen = "{:input('param.isopen')}";
					if (isOpen == "1") {
						clickParams.isopen = 1;
					}
					
					// 跳转到点击的会员
					location.hash = ns.hash("lian://shop/member/charts", clickParams);
				}
			});

			// 窗口调整
			window.addEventListener('resize', function() {
				myChart.resize();
			});

		} catch (error) {
			console.error('ECharts渲染失败:', error);
			layer.msg('关系图渲染失败: ' + error.message, {icon: 2});
		}
	} else {
		console.error('渲染条件检查:', {
			'DOM存在': !!dom,
			'数据存在': !!memberData,
			'数据类型': typeof memberData,
			'有member_id': memberData ? !!memberData.member_id : false
		});
		
		if (!dom) {
			layer.msg('图表容器未找到', {icon: 2});
		} else if (!memberData) {
			layer.msg('会员数据为空', {icon: 2});
		} else {
			layer.msg('会员数据格式错误', {icon: 2});
		}
	}
	{/if}
	</script>